A Chrome extension that provides render-on-hover functionality for image-as-code formats like PlantUML and SVG.
chrome://extensions/Click on the extension icon to access the following settings:
For advanced settings, click on "Advanced Options" to configure:
npm install to install dependenciesnpm run convert-icons to generate PNG icons from SVGnpm run build to build the extensiondist directory# Development build with watch mode
npm run dev
# Production build
npm run build
# Run tests
npm test
# Package the extension
npm run package
# Convert SVG icons to PNG
npm run convert-icons
The project includes Podman Compose support for building, testing, and packaging the extension in isolated containers.
# Make the podman script executable
chmod +x scripts/podman-run.sh
# Run the complete build pipeline
./scripts/podman-run.sh pipeline
# Individual commands
./scripts/podman-run.sh build # Build the extension
./scripts/podman-run.sh test # Run tests
./scripts/podman-run.sh package # Package the extension
./scripts/podman-run.sh icons # Convert icons
./scripts/podman-run.sh dev # Run in development mode
./scripts/podman-run.sh clean # Clean up containers
The extension uses content scripts to detect when you hover over code blocks. When a code block containing PlantUML or SVG is detected, it:
The extension implements debouncing to prevent excessive API calls, waiting at least 15 seconds (configurable) between renderings.
PlantUML diagrams are encoded using the following process:
manifest.json: Extension configurationbackground.js: Background service workercontent.js: Content script that runs on web pagespopup.html/popup.js: Extension popup UIoptions.html/options.js: Advanced options pageContributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License - see the LICENSE file for details.
Because image-as-code formats are almost native to markdown and html now, and it's just annoying that mermaid is rendered, but plantuml isn't.
NB: Use at your own risk. Most of this code was "vibe-coded" using CursorAI.
const url = https://www.plantuml.com/plantuml/png/~1${encoded};
console.log('PlantUML URL:', url);
return url;